<template>
<div class="archiveBody">
	<el-divider></el-divider>
	<el-timeline>
		<div v-for="blog in blogs">
			<el-timeline-item size="large" color="#99b9f9" icon="el-icon-date" :timestamp="blog.createTime|moment('YYYY-MM-DD')" placement="top">
			<el-card>
				<div style="font-size:10px;">
					<i class="el-icon-s-custom"></i> {{blog.blogAuthor}}
				</div>
				<div style="text-align:center;">
					<el-link @click="onSubmit(blog)" :underline="false"><h4 >{{blog.title}}</h4></el-link>
				</div>
				<div style="font-size:10px;">
					<i class="el-icon-time"></i> {{blog.createTime|moment('HH:mm:ss')}}
				</div>
			</el-card>
			</el-timeline-item>
		</div>
	</el-timeline>
<el-backtop></el-backtop>
</div>
</template>

<script>
export default {
	data() {
		return {
			blogs:[],
		}
	},
	created() {
		this.getData();
	},
	methods: {
		getData(){
			this.axios.get(`http://120.77.213.195:8001/blog/list`).then((response)=>{
				this.blogs = response.data.blogs;
			});
		},
		onSubmit(blog) {
			console.log(blog);
			this.$router.push({ name: 'detail', params: { id: blog } });
		},
	},
}
</script>

<style>
.archiveBody{
	margin: 10px 10%;
}
</style>